<template>
  <div style="overflow-y: auto; padding: 10px">
    <a-form :form="form">
      <a-form-item
        label="姓名"
        style="display: flex; align-items: center"
        :labelCol="{ span: 4 }"
        :wrapperCol="{ span: 16 }"
      >
        <a-input v-decorator="['fbusmc']" />
      </a-form-item>
      <a-form-item
        label="性别"
        :labelCol="{ span: 4 }"
        :wrapperCol="{ span: 16 }"
      >
        <a-radio-group  v-model="formData.fsex" name="radioGroup">
          <a-radio value="1"> 男 </a-radio>
          <a-radio value="2"> 女 </a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item
        label="出生年月"
        :labelCol="{ span: 4 }"
        :wrapperCol="{ span: 16 }"
      >
        <a-date-picker v-model="formData.fcsny" @change="handlerPickChange($event,'fcsny')" />
      </a-form-item>
      <a-form-item
        label="毕业院校"
        :labelCol="{ span: 4 }"
        :wrapperCol="{ span: 16 }"
      >
        <a-input  v-model="formData.fbyyx" />
      </a-form-item>
      <a-form-item
        label="专业"
        :labelCol="{ span: 4 }"
        :wrapperCol="{ span: 16 }"
      >
        <a-input v-model="formData.fzy"  />
      </a-form-item>
      <a-form-item
        label="工作单位"
        :labelCol="{ span: 4 }"
        :wrapperCol="{ span: 16 }"
      >
        <a-input  v-model="formData.fgzdw"  />
      </a-form-item>
      <a-form-item
        label="部门"
        :labelCol="{ span: 4 }"
        :wrapperCol="{ span: 16 }"
      >
        <a-input v-model="formData.fszbm"  />
      </a-form-item>
      <a-form-item
        label="职务"
        :labelCol="{ span: 4 }"
        :wrapperCol="{ span: 16 }"
      >
        <a-input v-model="formData.fzw"  />
      </a-form-item>
      <a-form-item
        label="职称"
        :labelCol="{ span: 4 }"
        :wrapperCol="{ span: 16 }"
      >
        <a-input v-model="formData.fzc"  />
      </a-form-item>
      <a-form-item
        label="现从事工作"
        :labelCol="{ span: 4 }"
        :wrapperCol="{ span: 16 }"
      >
        <a-input v-decorator="['fcsgz']" />
      </a-form-item>
      <a-form-item
        label="单位电话"
        :labelCol="{ span: 4 }"
        :wrapperCol="{ span: 16 }"
      >
        <a-input v-model="formData.fdwdh"  />
      </a-form-item>
      <a-form-item
        label="手机"
        :labelCol="{ span: 4 }"
        :wrapperCol="{ span: 16 }"
      >
        <a-input v-model="formData.fphone"  />
      </a-form-item>
      <a-form-item
        label="传真"
        :labelCol="{ span: 4 }"
        :wrapperCol="{ span: 16 }"
      >
        <a-input v-model="formData.fcz"   />
      </a-form-item>
      <a-form-item
        label="E-MALL"
        :labelCol="{ span: 4 }"
        :wrapperCol="{ span: 16 }"
      >
        <a-input v-model="formData.femail"  />
      </a-form-item>
      <a-form-item
        label="拟推荐审评员资格"
        :labelCol="{ span: 4 }"
        :wrapperCol="{ span: 16 }"
      >
        <a-select
        v-model="formData.ftjzg"
          v-decorator="[
            'ftjzg',
            { rules: [{ required: true, message: '请输入拟推荐审评员资格' }] },
          ]"
        >
          <a-select-option
            v-for="r in recommedZgArray"
            :value="r.value"
            :key="r.value"
            >{{ r.label }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item
        label="曾发表过的”药品生产相关监管、审评、检验方面的专著、文章“"
        :labelCol="{ span: 23 }"
        :wrapperCol="{ span: 23 }"
      >
        <a-textarea v-model="formData.ffbgdwz"  />
      </a-form-item>
      <a-form-item
        label="所在单位意见"
        :labelCol="{ span: 23 }"
        :wrapperCol="{ span: 23 }"
      >
        <a-textarea v-model="formData.fszdwyj"  />
      </a-form-item>

      <a-form-item :labelCol="{ span: 16 }" :wrapperCol="{ span: 23 }">
        <a-collapse default-active-key="1" :bordered="false">
          <template #expandIcon="props">
            <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
          </template>
          <a-collapse-panel
            key="1"
            header="工作简历"
            style="
              background: #f7f7f7;
              border-radius: 4px;
              margin-bottom: 24px;
              border: 0;
              overflow: hidden;
            "
          >
            <div>
              <div v-for="(gzjl, index) in formData.gzjlList" :key="index"  style="margin-bottom: 10px;">
                <a-row :gutter="24"><a-col :span="24">{{ (index + 1) }}、</a-col></a-row>
                <a-row>
                  <a-col :span="4">开始时间：</a-col>
                  <a-col :span="20">
                    <a-date-picker
                      @change="handlerPicker($event, gzjl, 'fgzkssj')"
                    />
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="4">结束时间：</a-col>
                  <a-col :span="20">
                    <a-date-picker
                      @change="handlerPicker($event, gzjl, 'fgzjssj')"
                    />
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="4">工作单位：</a-col>
                  <a-col :span="20"
                    ><a-input v-model="gzjl.fgzdw"></a-input
                  ></a-col>
                </a-row>
                <a-row>
                  <a-col :span="4">所在部门:</a-col>
                  <a-col :span="20"
                    ><a-input v-model="gzjl.fszbm"></a-input
                  ></a-col>
                </a-row>
                <a-row>
                  <a-col :span="4">职务:</a-col>
                  <a-col :span="20"
                    ><a-input v-model="gzjl.fzw"></a-input
                  ></a-col>
                </a-row>
                <a-row>
                  <a-col :span="4">职称:</a-col>
                  <a-col :span="20"
                    ><a-input v-model="gzjl.fzc"></a-input
                  ></a-col>
                </a-row>
                <a-row>
                  <a-col :span="4">从事工作:</a-col>
                  <a-col :span="20"
                    ><a-input v-model="gzjl.fcsgz"></a-input
                  ></a-col>
                </a-row>
              </div>

              <a-row style="margin-top: 15px" :gutter="24">
                <a-col :span="24">
                  <a-button type="primary" style="width: 100%;" @click="handlerGzjlAdd">添加</a-button>
                </a-col>
              </a-row>
            </div>
          </a-collapse-panel>
        </a-collapse>
      </a-form-item>
    </a-form>
    <a-row :gutter="24">
      <a-col :span="24">
        <a-button type="primary" style="width: 100%;" @click="handlerAddForm"> 保存 </a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import moment from "moment";
import { addHcyTj, addHcyGzjl } from "../api/recommend";
import { recommedZgArray } from "../common/GroupConfig";
export default {
  data() {
    return {
      // 拟推荐审评员资格数组
      recommedZgArray: recommedZgArray,
      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" }),
      formData: {
        // 工作简历
        gzjlList: [
          {
            fbusmc: "", //姓名
            fcsgz: "", //从事工作
            fgzdw: "", //工作单位
            fgzjssj: "", //工作结束时间
            fgzkssj: "", //工作开始时间
            fszbm: "", //所在部门
            fzc: "", //职称
            fzw: "", //职务
            index:0,
          },
        ],
      },
    };
  },
  mounted() {
    document.querySelector("#app").className = "app-forms";
  },
  methods: {
    handlerAddForm() {
      this.form.validateFields((error, values) => {
        if (!error) {
          const Obj = Object.assign(this.formData, values);
          //console.log(Obj);
          addHcyTj(Obj).then((res) => {
            if(res.success) {
              this.$router.replace("/flexform-success")
            }else {
              this.$message.error(res.message);
            }
          }).catch(error => {
            this.$message.error("未知异常");
          });
        }
      });
    },
    handlerPicker(event, gzjl, prototype) {
      const data = this.formData.gzjlList
      const target = data.find(d => d.index == gzjl.index)
      //console.log(target);
      if(target) {
        let str =  moment(event).format("YYYY-MM-DD")
        target[prototype] = str
        this.formData.gzjlList = data
      }
    },
    handlerGzjlSave() {
      const fbusmc = this.form.getFieldsValue(["fbusmc"]);
      //console.log(fbusmc);
      this.formData.gzjlList.forEach(async (i, index) => {
        i.fbusmc = fbusmc;
        const res = await addHcyGzjl(i);
        if (res.success) {
          if (this.formData.gzjlList.length - 1 === index) {
            this.$message.success(res.message);
          }
        }
      });
    },
    handlerPickChange(event,prototype) {
      let obj = {}
      this.formData[prototype] = moment(event).format("YYYY-MM-DD")
      
    },
    handlerSetTimout(index) {},
    handlerGzjlAdd() {
      let len = this.formData.gzjlList.length
      this.formData.gzjlList.push({
        fbusmc: "", //姓名
        fcsgz: "", //从事工作
        fgzdw: "", //工作单位
        fgzjssj: "", //工作结束时间
        fgzkssj: "", //工作开始时间
        fszbm: "", //所在部门
        fzc: "", //职称
        fzw: "", //职务
        index:len
      });
    },
  },
};
</script>

<style>
.app-forms {
  overflow-y: auto;
}
</style>
